import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class TodoItem extends Component {
    render() {
        const {completed, text, onToggle, onRemove} = this.props;
        return (
            <li
                style={{
                    textDecoration: completed? 'line-through': 'none'
                }}
            >
                <input type="checkbox" readOnly checked={completed} onClick={onToggle}/>
                <label>{text}</label>
                <button onClick={onRemove}>x</button>
            </li>
        );
    }
}

TodoItem.propTypes = {
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired,
    onToggle: PropTypes.func.isRequired,
    onRemove: PropTypes.func.isRequired
};

